import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import {
  EllipsisOutlined,
  PlusOutlined,
  AreaChartOutlined,
} from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import {
  Button,
  Modal,
  Dropdown,
  Space,
  Tag,
  Table,
  Switch,
  Col,
  Row,
  Tooltip,
  Input,
} from 'antd';
import { useRef } from 'react';
import request from 'umi-request';
import { timestampToTime } from '@/untils/index';
import './index.less';
import { history } from 'umi';
import LazyLoad from 'react-lazyload';
import DelData from '@/components/DelData';

type GithubIssueItem = {
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
  lazyload: any;
};

export const index = ({ houselist, dispatch, props }: any) => {
  const actionRef = useRef<ActionType>();
  useEffect(() => {
    dispatch({ type: 'house/GET_HOUSE' });
  }, []);
  // 删除
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [delIndex, setdelIndex] = useState(0);
  const [deltitle, setdeltitle] = useState('');
  const delfn = (record: any, index: any) => {
    setIsModalOpen(true);
    setdelIndex(index);
    setdeltitle(record.title);
  };
  const closeModel = () => {
    setIsModalOpen(false);
  };

  // const onChange = (e: any) => {
  //   console.log(e.target.value);
  //   const value = e.target.value;
  //   dispatch({ type: 'house/GET_SEARCH', value });
  //   console.log(value)
  // };
  const { Search } = Input;
  const onSearch = (value: string) => {
    dispatch({ type: 'house/GET_SEARCH', value });
  };
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '楼盘名称',
      dataIndex: 'title',
      render: (item: any, info: any) => {
        const img =
          info.rec_position === 1 ? (
            <img
              className="img"
              src="http://fangadmin.shbwyz.com/static/images/rec.png"
              alt=""
            />
          ) : (
            ''
          );
        return (
          <div className="lazy">
            {item}
            <LazyLoad>
              <Tooltip
                title={
                  <img
                    style={{ width: '100%' }}
                    src={`http://fangadmin.shbwyz.com${info.img}`}
                  ></img>
                }
              >
                <AreaChartOutlined style={{ margin: '0 6px' }} />
              </Tooltip>
            </LazyLoad>
            {img}
          </div>
        );
      },
    },
    {
      title: '所属区域',
      dataIndex: '',
    },
    {
      title: '价格',
      dataIndex: 'price',
      render: (item: any) => {
        return item === 0 ? (
          <span>待定</span>
        ) : item < 10 ? (
          <span>{item}万/套</span>
        ) : (
          <span>{item}元/m²</span>
        );
      },
    },
    {
      title: '更新时间',
      dataIndex: 'id',
      render: (item: any) => {
        return timestampToTime(item);
      },
    },
    {
      title: '排序',
      dataIndex: 'ordid',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (item: any) => {
        return (
          <Switch
            checkedChildren="正常"
            unCheckedChildren="禁用"
            defaultChecked={item === 0 ? false : true}
          />
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      render: (itext, record, index, action) => {
        return (
          <div>
            <Row>
              <Col>
                <Button
                  size="small"
                  onClick={() => {
                    history.push('/index/house/huxing');
                  }}
                >
                  户型
                </Button>
              </Col>
              <Col>
                <Button
                  size="small"
                  onClick={() => {
                    history.push('/index/house/xiangce');
                  }}
                >
                  相册
                </Button>
              </Col>
              <Col>
                <Button
                  size="small"
                  onClick={() => {
                    history.push('/index/house/dongtai');
                  }}
                >
                  动态
                </Button>
              </Col>
            </Row>
            <Row>
              <Col>
                <Button
                  size="small"
                  onClick={() => {
                    history.push('/index/house/shapan');
                  }}
                >
                  沙盘
                </Button>
              </Col>
              <Col>
                <Button
                  size="small"
                  onClick={() => {
                    goedit(record, record.id);
                  }}
                >
                  编辑
                </Button>
              </Col>
              <Col>
                <Button
                  size="small"
                  onClick={() => {
                    delfn(record, index);
                  }}
                >
                  删除
                </Button>
              </Col>
            </Row>
          </div>
        );
      },
    },
    // git add.  git status git commit -m(首次提交)
  ];
  // 编辑
  const goedit = (item: any, id: any) => {
    // console.log(item,id)
    history.push('/index/hire/second/detail', {
      state: { item, id },
    });
  };
  return (
    <div>
      <ProTable<GithubIssueItem>
        columns={columns}
        actionRef={actionRef}
        dataSource={houselist}
        cardBordered
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          onChange(value) {},
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        dateFormatter="string"
        headerTitle="高级表格"
        toolBarRender={() => [
          // <Input.Group compact>
          //   <Input
          //     style={{ width: 'calc(100% - 100px)' }}
          //     defaultValue=""
          //     onChange={(e) => onChange(e)}
          //   />
          //   <Button type="primary">搜索</Button>
          // </Input.Group>,
          <Search
            placeholder="input search text"
            allowClear
            enterButton="Search"
            size="large"
            onSearch={onSearch}
          />,
          <Dropdown
            key="menu"
            menu={{
              items: [
                {
                  label: '1st item',
                  key: '1',
                },
                {
                  label: '2nd item',
                  key: '1',
                },
                {
                  label: '3rd item',
                  key: '1',
                },
              ],
            }}
          >
            <Button>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ]}
      >
        <input type="text" />
        1111
      </ProTable>
      <LazyLoad>
        <img
          src="http://fangadmin.shbwyz.com/static/common/images/visitor.jpg"
          alt=""
        />
      </LazyLoad>
      {/* 删除弹框 */}
      <DelData
        isModalOpen={isModalOpen}
        delIndex={delIndex}
        deltitle={deltitle}
        closeModel={closeModel}
      ></DelData>
    </div>
  );
};

const mapStateToProps = ({ house: { houselist } }: any) => {
  return {
    houselist,
  };
};

export default connect(mapStateToProps)(index);
